<template>
  <div class="invoiceSet">
    <div>
      <i>可开票订单:</i>
      <span v-for="(item,idx) in checkboxList" :key="item.name">
        <el-checkbox v-model="item.isChecked" @change="selectOpen($event,idx)">{{ item.name }}</el-checkbox>
      </span>
    </div>
    <div style="color:#909399;margin: 10px 0 0 80px">
      温馨提示：打“√”则代表该订单类型开通电票业务，用户可在小程序申请开票
    </div>
  </div>
</template>
<script>
import { invoiceSet, invoiceStatus } from '@/api/invoice'
import { isNumeric } from '@/utils'
export default {
  name: 'InvoiceSet',
  props: {
    tabName: {
      type: String,
      default: '',
      require: false
    }
  },
  data() {
    return {
      checked: true,
      checkboxList: [
        {
          name: '商城开票',
          isChecked: false,
          shangchengSts: 0
        },
        {
          name: '点餐开票',
          isChecked: false,
          diancanSts: 0
        },
        {
          name: '预约开票',
          isChecked: false,
          yuyueSts: 0
        },
        {
          name: '预订开票',
          isChecked: false,
          yudingSts: 0
        },
        {
          name: '会员充值开票',
          isChecked: false,
          huiyuanchongzhiSts: 0
        },
        {
          name: '会员开卡开票',
          isChecked: false,
          huiyuankaikaSts: 0
        },
        {
          name: '会员续费开票',
          isChecked: false,
          huiyuanxufeiSts: 0
        },
        {
          name: '赠送会员开票',
          isChecked: false,
          zengsonghuiyuanSts: 0
        }
      ]

    }
  },
  watch: {
    tabName(v) {
      v === 'invoice' && this.getInvoiceStatus()
    }
  },
  methods: {
    selectOpen(e, idx) {
      // 构造params对象
      const arr = []
      const checkboxList = this.checkboxList
      for (const i in this.checkboxList[idx]) {
        arr.push(i)
      }
      checkboxList[idx][arr[2]] = e ? 1 : 0
      let params = {}
      checkboxList.map(item => {
        const arrKey = Object.keys(item)
        const key = arrKey[2]
        params = {
          ...params,
          [key]: item[key]
        }
      }
      )
      invoiceSet(params).then(res => {
        res.code === 0 && this.$message.success('成功')
      })
    },
    getInvoiceStatus() {
      invoiceStatus().then(res => {
        !res.data.businessReceiptOpeSts && this.$confirm('商户暂未开通发票功能，一家门店开通后方可设置', '提示', {
          confirmButtonText: '前往开通',
          cancelButtonText: '取消',
          iconClass: 'el-icon-question',
          center: true
        }).then(() => {
          this.$emit('update:tabName', 'info')
        })
		.catch(() => {
			this.$emit('update:tabName', 'info')
		});
        this.checkboxList.forEach(item => {
          const arrKey = Object.keys(item)
          const key = arrKey[2]
          item[key] = res.data[key] === null ? 0 : res.data[key]
          item.isChecked = item[key] === 1
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.invoiceSet {
  width: 100%;
  height: 30vh;
  background-color: #ffffff;
  padding: 20px;
  font-size: 14px;

  i {
    font-style: normal;
    margin-right: 10px;
  }

  span {
    margin-right: 20px;
  }
}
</style>
